<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const props = defineProps({
    title: String,
    leftArrow: {
        type: Boolean,
        default: true
    },
    bgColor: {
        type: String,
        default: 'transparent'
    },
    clickLeft: Function
})

function clickLeft() {
    if (props.clickLeft) {
        return props.clickLeft()
    }
    router.back()
}
</script>

<template>
    <van-nav-bar :title="title" fixed placeholder :border="false" :left-arrow="leftArrow"
        :style="{ backgroundColor: bgColor }" @click-left="clickLeft">
        <template #title>
            <slot></slot>
        </template>
    </van-nav-bar>
</template>

<style lang='scss' scoped>
::v-deep {
    .van-nav-bar {
        background-color: transparent;

        .van-icon {
            color: #fff;
        }
    }
}
</style>